<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="账号状态" class="form-item">
          <el-select clearable v-model="formInline.account_status" placeholder="请选择" class="form-label">
              <el-option v-for="item in countStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="账号角色" class="form-item">
        <el-select clearable v-model="formInline.account_role" placeholder="请选择" class="form-label">
            <el-option v-for="item in roleLists" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号/账号名搜索" class="form-item">
          <el-input v-model="formInline.mobile_or_account_name" placeholder="输入手机号/账号名搜索" class="form-label"></el-input>
      </el-form-item>
    <el-form-item class="buttons">
        <el-button class="search" type="search" @click="onSubmit('formInline')">查询</el-button>
        <el-button class="clear" @click="clearSearch">清空</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
  import { ElForm, ElFormItem, ElButton, ElInput, ElSelect, ElOption } from 'element-plus'
  import { getCurrentInstance } from 'vue'
  import {roleList} from '@/api/sub'
  import { ref } from 'vue'
  const countStatus = [
  {
    value: '-1',
    label: '全部'
  },
  {
    value: '0',
    label: '未启用'
  },
  {
    value: '1',
    label: '已启用'
  },
  {
    value: '2',
    label: '已禁用'
  }
]
  defineProps(['formInline','roleLists'])
  const internalInstance = getCurrentInstance()
  const emit = defineEmits({
    searchChange: null,
    clearSearchs: null
  })
  const onSubmit = (formName: string) => {
    const { account_status, account_role, mobile_or_account_name } = internalInstance?.proxy?.[formName]
    emit('searchChange', {
      account_status,
      account_role,
      mobile_or_account_name
    })
  }
  const clearSearch = () =>{
    emit('clearSearchs')
  }
</script>
<style lang="scss" scoped>
.demo-form-inline {
  display: flex;
  justify-content: space-between;
  .search {
    background-color: #FF6B00;
    color: #ffffff;
  }
}
</style>
